<template>
  <div>
    <h1>店铺信息</h1>
    <el-card shadow="never" style="height: 450px;">
      <template #header>
        <div class="card-header" style="position: relative;">
          <span>基本信息</span>
          <el-button type="primary" style="position: absolute;right: 0;" @click="addShop = true" v-if="!shopList.shopName">新增店铺信息</el-button>
        </div>
      </template>
      
      <div>
  <el-empty v-if="!shopList.shopName" description="暂无店铺信息"></el-empty>
      <el-descriptions v-else border :column="1">
        <el-descriptions-item label="店铺头像" align="center">
          <el-avatar :size="200" :src="BASE_URL+shopList.avatarUrl" fit="contain"/>
        </el-descriptions-item>
        <el-descriptions-item label="店铺名称" align="center">{{ shopList.shopName }}</el-descriptions-item>
        <el-descriptions-item label="店铺地址" align="center">{{ shopList.address }}</el-descriptions-item>
      </el-descriptions>
    </div>
    </el-card>

    <!-- 新增/编辑店铺信息对话框 -->
    <el-dialog v-model="addShop" title="完善店铺信息" width="50%">
      <el-form :model="shopList" label-width="100px">
        <el-form-item label="店铺名称" required>
          <el-input v-model="shopList.shopName" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址" required>
          <el-input v-model="shopList.address" placeholder="请输入店铺地址"></el-input>
        </el-form-item>
        <el-form-item label="店铺头像">
          <el-upload
            v-model:file-list="fileList"
            v-model:action="actionUrl"
            name="file"
            limit="1"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            >
            <el-icon>
                <Plus/>
            </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl"/>
            </el-dialog>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addShop = false">取消</el-button>
          <el-button type="primary" @click="addAddress">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import axios from "axios";
import qs from "qs";
import { ElMessage } from 'element-plus';
// 定义一个对象用于存储商铺信息
const shopList = ref(
  {
    username: "",
    shopName: "",
    address: "",
    avatarUrl:""
  }
)
//获取当前登录商家的name
const userString = localStorage.getItem('user');
const user = JSON.parse(userString);
const name = user.username;
console.log(localStorage);
//新增商铺信息的弹窗
const addShop = ref(false);

//定义查询商铺信息的方法
const searchSeller = () => {
  axios.get(BASE_URL+'/v1/seller/select/'+name).then((response)=>{
    if (response.data.code == 2000 ){
      if(response.data.data == null){
        addShop.value = true;
        return;
      }
      shopList.value = response.data.data;
      console.log(shopList.value);
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//定义新增商铺信息的方法
const addAddress = () => {
  shopList.value.username = name;
  shopList.value.avatarUrl = fileList.value[0].response.data;
  let data = qs.stringify(shopList.value)
  axios.post(BASE_URL+'/v1/seller/add',data).then((response)=>{
    if (response.data.code == 2000 ){
      ElMessage.success("新增店铺信息成功!");
      addShop.value = false;
      searchSeller();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
onMounted(()=>{
  searchSeller()
})

/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(BASE_URL+'/v1/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('删除成功!');
        }
      })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  console.log(uploadFile);
  //console.log(fileList.value[0].response.data);
}
/**图片上传相关代码结束**/
</script>


<style scoped>

</style>